<template>
	<view class="p-b-150">
		<uni-nav-bar statusBar fixed backgroundColor='#3f6efe' color='#fff'>
			<view class="w-100p flex-c flex-aic f-28">报账图表</view>
		</uni-nav-bar>

		<uni-section class="m-t-20" title="近期常报" type="line"></uni-section>
		<view class="charts-box p-t-30 ">
			<qiun-data-charts type="bubble" :opts="opts1" :errorMessage='errorMessage' :errorReload='false' :chartData="chartData1" />
		</view>

		<uni-section class="m-t-60" title="报销统计" type="line"></uni-section>
		<view class="charts-box ">
			<qiun-data-charts type="arcbar" :opts="opts2" :errorMessage='errorMessage2' @complete='complete' :chartData="chartData2" />
		</view>

		<uni-transition mode-class="slide-bottom" :show="radshow">
			<view class="flex flex-aic flex-c m-t-40">
				<view class="m-r-20 flex flex-aic flex-c">
					<view class="w-20 h-20 m-r-10 br-50p" :style="{backgroundColor:opts2.color[0]}"></view>
					<view class="f-24">待报销 {{chartData2.total.pending}} (笔)</view>
				</view>
				<view class="m-r-20 flex flex-aic flex-c">
					<view class="w-20 h-20 m-r-10 br-50p" :style="{backgroundColor:opts2.color[1]}"></view>
					<view class="f-24">已报销 {{chartData2.total.complete}} (笔)</view>
				</view>
				<view class="flex flex-aic flex-c">
					<view class="w-20 h-20 m-r-10 br-50p" :style="{backgroundColor:opts2.color[2]}"></view>
					<view class="f-24">已驳回 {{chartData2.total.overrule}} (笔)</view>
				</view>
			</view>
		</uni-transition>


		<uni-section class="m-t-60 m-b-25" title="统计数据" type="line"></uni-section>
		<uni-grid :column="3" :square='false' :highlight='false'>
			<uni-grid-item>
				<view class="p-t-25 p-b-25">
					<view class="tac f-28 fw-small">待报销金额</view>
					<view class="tac f-25">{{total.pending}}</view>
				</view>
			</uni-grid-item>
			<uni-grid-item>	
				<view class="p-t-25 p-b-25">
					<view class="tac f-28 fw-small">已报销金额</view>
					<view class="tac f-25">{{total.complete}}</view>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="p-t-25 p-b-25">
					<view class="tac f-28 fw-small">被驳回金额</view>
					<view class="tac f-25">{{total.overrule}}</view>
				</view>
			</uni-grid-item>
		</uni-grid>

	</view>



</template>

<script>
	export default {
		data() {
			return {
				errorMessage:null,//气泡图表是否为空
				errorMessage2:null,//统计表是否为空
				radshow: false,
				chartData1: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['bubble'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 10, 15],
					legend: {
						show: false
					},
					series:[],
					xAxis: {
						disabled: true,
						disableGrid: true,
						gridType: "dash",
						splitNumber: 5,
						boundaryGap: "justify",
						min: 0,
						max: 250
					},
					yAxis: {
						disabled: true,
						disableGrid: false,
						gridType: "dash",
						data: [{
							min: 0,
							max: 150
						}]
					},
					extra: {
						bubble: {
							border: 2,
							opacity: 0.5
						}
					}
				},
				chartData2: {
					total: {

					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#EE6666"],
					padding: undefined,
					title: {
						name: "统计",
						fontSize: 35,
						color: "#1890ff"
					},
					subtitle: {
						name: "报销状态",
						fontSize: 15,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				total:{}
			};
		},
		onShow() {
			this.getBubble()
			this.getRound()
			this.getTotal()
		},
		onPullDownRefresh() {
			this.getBubble()
			this.getRound()
			this.getTotal()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		methods: {
			getTotal(){//查询统计数据
			   this.$http.get('/echarts/total').then(res=>{
				   this.total = res.data
			   })
			},
			complete() {
				this.radshow = true
			},
			getBubble() { //气泡图
				this.$http.get('/echarts/bubble').then(res => {
					if(res.data.length === 0){
						this.errorMessage = "无数据"
					}else{
						this.chartData1 = JSON.parse(JSON.stringify({
							series: res.data
						}));
					}
					
				})

			},
			getRound() {
				this.$http.get('/echarts/round').then(res => {
					let istrue = false
					for(let i =0;i<res.data.series.length;i++){
						if(res.data.series[i].data === 0){
							istrue = true
						}else{
							istrue = false
							break;
						}
					}
					if(istrue){
						this.errorMessage2 = "无数据"
					}else{
						this.chartData2 = JSON.parse(JSON.stringify(res.data));
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: white;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 280px;
	}
	/deep/ .uni-navbar--fixed{
		z-index: 10;
	}
</style>
